<template>
    <el-row>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="项目名称" prop="nickname">
                <el-input v-model="queryParams.nursingName" placeholder="请输入名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" size="small" @click="queryList">搜索</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button class="insertButton" type="primary" icon="Plus" size="small"
                @click="insertModAdd">添加项目</el-button>
        </el-col>
    </el-row>
    <el-row v-loading="loading">
        <el-table :data="tableData">
            <el-table-column label="序号" type="index" width="80" align="center" />
            <el-table-column prop="serialNumber" label="项目编号" align="center" />
            <el-table-column prop="nursingName" label="项目名称" align="center" />
            <el-table-column prop="servicePrice" label="项目价格" align="center" />
            <el-table-column prop="message" label="项目描述" align="center" />
            <el-table-column prop="executionCycle" label="循环模式" align="center" />
            <el-table-column prop="executionTimes" label="循环次数" align="center" />
            <el-table-column prop="status" label="状态" align="center" />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="danger" size="small" icon="Delete" round
                        @click="deleteUser(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- v-model 组件里面的数据修改 外面的 queryParams.current 改变，tableData也会改变 -->
        <el-pagination layout="sizes ,prev, pager, next, jumper, ->, total," :total="queryParams.total"
            v-model:page-size="queryParams.size" v-model:current-page="queryParams.current" @current-change="queryList"
            @size-change="queryList" :page-sizes="[2, 3, 5, 10, 20]" />
    </el-row>

    <el-dialog v-model="showModAdd" title="项目添加" style="width: 600px;">
        <ModAdd v-if="showModAdd" :closeModAdd="closeModAdd" :modAddId="modAddId" />
    </el-dialog>
</template>

<script setup name="mod">
import { ref, reactive } from "vue";
import { getItem, removeItemById, getById, getByName } from '@/api/CareManagement/careLevel/index';
import { ElMessageBox, ElNotification } from "element-plus";
import { onMounted } from "vue";
import ModAdd from './modadd.vue'
const loading = ref(false)
const { modId } = defineProps({
    modId: {
        type: Number,
        required: true
    }
})
const modAddId = ref(0)
// 表格数据 
const showModAdd = ref(false)
const tableData = ref([])

const queryParams = ref({
    id: modId,
    nursingName: '',
    current: 1,
    size: 5,
    total: 0
})
const insertModAdd = (id) => {
    // 赋值
    modAddId.value =modId;
    showModAdd.value = true;
}
const closeModAdd = (query) => {
    showModAdd.value = false;
    if (query) {
        queryList(); 
    }
};
async function queryList() {
    try {
        const page = await getItem(queryParams.value);
        loading.value = false
        tableData.value = page.records;
        queryParams.value.total = page.total;
    } catch (e) {
        console.log(e);
        loading.value = true;
    }
}
const deleteParams = ref({
    levelId: modId,
    itemId: ''
})
const deleteUser = (id) => {
    deleteParams.value.itemId = id
    ElMessageBox.confirm(
        '是否确认删除该用户信息?',
        'Warning',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )

        .then(() => {
            removeItemById(deleteParams.value.levelId, deleteParams.value.itemId).then(success => {
                ElNotification({
                    title: '消息',
                    type: 'success',
                    message: "删除成功",
                })
                queryList();
            })
        })
}
onMounted(() => {
    queryList()
})
</script>

<style scoped>
.demo-form-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px 5px;
}

.demo-form-inline .el-input {
    --el-input-width: 500px;
}

/* .demo-form-inline .el-date-picker {
    --width: 10px;
  } */

/* .demo-form-inline .el-select {
    --el-select-width: 100px;
  } */
</style>
